<template>
<div class="star" :class="startype">
  <span class="star-item" v-for="(itemclass,index) in itemclasses" :class="itemclass" key="index"></span>

</div>

</template>

<script>
  const LENGTH = 5;
  const CLS_ON = 'on';
  const CLS_HALF = 'half';//半星
  const CLS_OFF = 'off';
  export default{
    props: {
      size: {
        type: Number
      },
      score: {
        type: Number
      }
    },
    computed:{
      startype(){
        return "star-"+this.size;
      },
      itemclasses(){
          var arr=[];
          var score = Math.floor(this.score * 2)/2;
          var hashalf = score % 1 !==0;
          var integer=Math.floor(score)
        for(var i=0; i<integer;i++){
              arr.push(CLS_ON)
        }
        if(hashalf){
          arr.push(CLS_HALF)
        }
        while (arr.length<LENGTH){
            arr.push(CLS_OFF)
        }

          return arr;
      }
    }


  }




</script>

<style scoped lang="less" rel="stylesheet/less">
  @import '../../common/less/mixin.less';
  .star{
    font-size: 0;
    .star-item{display: inline-block;background-size: cover; background-repeat:no-repeat;}
    &.star-48{
      .star-item{
        width: 20px;  height: 20px; margin-right: 22px;
        &:last-child{margin-right: 0}
        &.on{ .bg-image('../../components/star/star48_on')}
        &.half{ .bg-image('../../components/star/star48_half')}
        &.off{ .bg-image('../../components/star/star48_off')}
      }
    }
    &.star-36{
      .star-item{
        width: 15px;  height: 15px; margin-right: 6px;
        &:last-child{margin-right: 0}
        &.on{ .bg-image('../../components/star/star36_on')}
        &.half{ .bg-image('../../components/star/star36_half')}
        &.off{ .bg-image('../../components/star/star36_off')}
      }
    }
    &.star-24{
      .star-item{
        width: 10px;  height: 10px; margin-right: 3px;
        &:last-child{margin-right: 0}
        &.on{ .bg-image('../../components/star/star24_on')}
        &.half{ .bg-image('../../components/star/star24_half')}
        &.off{ .bg-image('../../components/star/star24_off')}
      }
    }
  }

</style>
